<template>
  <div class="distribution">
    <div class="title">
      配货管理
    </div>
    <div class="distribution-box">
      <div class="distribution-box-massage">
        <img src="../../../assets/image/sellerHub/error.png"
             alt=""
             width="16"
             height="16">
        提示：当前您有<span>{{overTimeCount}}</span>个订单<span>已超时</span>，请尽快处理避免造成损失。
      </div>
      <div class="distribution-box-search">
        <!-- <a-input v-model="form.subOrderNo"
                 placeholder="发货编号/订单编号/物料编号" />  -->
        <a-input-search placeholder="搜索订单单号/发货编号/订单编号/物料编号/物料名称"
                        v-model="form.keyWords"
                        @search="onSerch"
                        class="input-search">
          <a-icon slot="prefix"
                  type="search" />
          <a-button slot="enterButton">
            搜索
          </a-button>
        </a-input-search>
        <div class="search-button">
          <i v-if="moreFormStatus"
             @click="moreFormStatus = false"><img src="../../../assets/image/sellerHub/shaixuan2.png"
                 alt=""></i>
          <i v-if="!moreFormStatus"
             @click="moreFormStatus = true"><img src="../../../assets/image/sellerHub/shaixuan.png"
                 alt=""></i>
        </div>
        <a-button class="a-button">
          <img src="../../../assets/image/sellerHub/dc.png"
               alt=""
               width="16"
               height="16"
               style="vertical-align:sub">
          批量导出
        </a-button>
      </div>
      <div class="formBox"
           v-if="!moreFormStatus">
        <div class="sanjiao"></div>
        <a-form-model ref="ruleForm"
                      :model="form"
                      :rules="rules"
                      :label-col="{span:9}"
                      :wrapper-col="{spanm:15}">
          <a-row>
            <a-col :span="6">
              <a-form-model-item label="期望配货完成时间"
                                 prop="expectDistributeStartTime">
                <a-range-picker :placeholder="['开始时间','结束时间']"
                                @change="onChangeexpectDistributeStartTime"
                                style="width:100%">
                  <a-icon slot="suffixIcon"
                          type="calendar" />
                </a-range-picker>

              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="配货完成时间"
                                 prop="distributeFinishStartTime">
                <a-range-picker :placeholder="['开始时间','结束时间']"
                                @change="onChangedistributeFinishStartTime"
                                style="width:100%">
                  <a-icon slot="suffixIcon"
                          type="calendar" />
                </a-range-picker>
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="确认上门提货时间"
                                 prop="homeDeliveryStartTime">
                <a-range-picker :placeholder="['开始时间','结束时间']"
                                @change="onChangehomeDeliveryStartTime"
                                style="width:100%">
                  <a-icon slot="suffixIcon"
                          type="calendar" />
                </a-range-picker>
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="实际提货时间"
                                 prop="actualDeliveryStartTime">
                <a-range-picker :placeholder="['开始时间','结束时间']"
                                @change="onChangeactualDeliveryStartTime"
                                style="width:100%">
                  <a-icon slot="suffixIcon"
                          type="calendar" />
                </a-range-picker>
              </a-form-model-item>
            </a-col>

          </a-row>
          <a-row>

            <a-col :span="6">
              <a-form-model-item label="订单时间"
                                 prop="createStartAt">
                <a-range-picker :placeholder="['开始时间','结束时间']"
                                @change="onChangecreateStartAt"
                                style="width:100%">
                  <a-icon slot="suffixIcon"
                          type="calendar" />
                </a-range-picker>
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="配货人"
                                 prop="distributionName">
                <a-input v-model="form.distributionName"
                         @change="onSerch()"
                         placeholder="请输入配货人姓名" />
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="服务网点"
                                 prop="tenantId">
                <a-select v-model="form.tenantId"
                          @change="onSerch()"
                          placeholder="请选择服务网点">
                  <a-select-option v-for="item in cardTypeArr"
                                   :value="item.tenantId"
                                   :key="item.id">
                    {{item.tenantName}}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="6">

            </a-col>
          </a-row>
        </a-form-model>
        <div class="more-form-button">
          <a-button @click="onReset">
            重置
          </a-button>
          <a-button @click="onSerch"
                    type="danger">
            查询
          </a-button>
          <!-- <span @click="onReset">重置</span>
                <span @click="onSerch"></span> -->
        </div>
      </div>
      <div class="distribution-title">
        <span @click="cutTitle( '' )"
              :class="{'active': form.state === ''}">全部<i>({{AllCount}})</i></span>
        <span @click="cutTitle('0')"
              :class="{'active': form.state === '0'}">待配货 <i>({{waitDistributeCount}})</i></span>
        <span @click="cutTitle('1')"
              :class="{'active': form.state === '1'}">已配货 <i>({{takeDistributeCount}})</i></span>
        <span @click="cutTitle('2')"
              :class="{'active': form.state === '2'}">待提货 <i>({{waitDeliveryCount}})</i></span>
        <span @click="cutTitle('3')"
              :class="{'active': form.state === '3'}">已提货 <i>({{takeDeliveryCount}})</i></span>
      </div>
      <div class="distribution-list">
        <div class="distribution-list-tit">
          <span>物料信息</span>
          <span>服务网点</span>
          <span>物料数量</span>
          <span>物料金额</span>
          <span>订单状态</span>
          <span>操作</span>
        </div>
        <div v-if="pageStatus">
          <div class="distribution-list-box"
               v-for="(item, i) in imageList"
               :key="item + i">
            <div class="distribution-goods">
              <div class="goods-tit">
                <!-- //待配货超时 -->
                <div :class="{'goods-tit-left':true, 'goods-active':item.timeoutStatus === 2}"
                     v-if="item.state == 0 ">
                  <a-icon type="clock-circle" />
                  <span class="goods-tit-s1">
                    <u>期望配货完成时间：</u>
                    <i>{{item.expectDistributeTimeDate}}</i>
                  </span>
                  <div class="goods-tit-s2">
                    <div v-if="item.timeoutStatus === 1"><i>{{item.expectDistributeTimeHH}}</i>:<i>{{item.expectDistributeTimeMM}}</i></div>
                    <!-- <div v-if="item.timeoutStatus === 2"><span>{{item.expectDistributeTimeHH}}</span> ：<span>{{item.expectDistributeTimeMM}}</span></div> -->
                  </div>
                </div>
                <!-- 待提货 -->
                <div :class="{'goods-tit-left':true, 'goods-active':item.timeoutStatus === 2 && item.homeDeliveryTimeDate.length> 5}"
                     v-if="item.state == '2' || item.state == '3' || item.state == 1">
                  <a-icon type="clock-circle" />
                  <span class="goods-tit-s1">
                    <u>期望提货完成时间：</u>
                    <i>{{item.homeDeliveryTimeDate}}</i>
                  </span>
                  <div class="goods-tit-s2"
                       v-if="item.homeDeliveryTimeDate.length> 5">
                    <div v-if="item.timeoutStatus === 1 && item.state != 1"><i>{{item.homeDeliveryTimeHH}}</i>:<i>{{item.homeDeliveryTimeHH}}</i></div>
                    <div v-if="item.timeoutStatus === 2 && item.state != 1"><span>{{item.homeDeliveryTimeHH}}</span> ：<span>{{item.homeDeliveryTimeHH}}</span></div>
                  </div>
                </div>
                <!-- //已超时样式 -->
                <div class="goods-tit-span"
                     v-if="item.timeoutStatus === 1 && item.expectDistributeTimeDate !== '--'">已超时
                  <span v-if="item.newDay !== 0"><i>{{item.newDay}}</i>天</span>
                  <span v-if="item.newHouer !== '00'"><i>{{item.newHouer}}</i>小时</span>
                  <span><i>{{item.newMinute}}</i>分钟！</span>
                </div>
                <!-- //未超时样式 -->
                <div class="goods-tit-span1"
                     v-if="item.timeoutStatus === 2 && item.expectDistributeTimeDate !== '--' && item.state == 0">
                  <img src="../../../assets/image/sellerHub/z.png"
                       alt=""
                       width="16"
                       height="16">
                  倒计时 <i>{{item.newDay}}</i>天 <i>{{item.newHouer}}</i>: <i>{{item.newMinute}}</i>
                </div>

                <div class="goods-tit-right">
                  配货单号：<i>{{item.distributionNo}}</i>
                  订单编号：<i @click="enterDetails(item.id)"
                     style="color:#1876FF;cursor: pointer;">{{item.subOrderNo}}</i>
                  <span>订单日期：<i>{{item.createAt}}</i></span>
                </div>
              </div>
              <div class="distribution-goods-content">
                <div class="distribution-message"
                     ref="messageWidth">
                  <img src="../../../assets/image/sellerHub/huowu.png"
                       alt="">
                  <div class="message-li"
                       v-if="item. distributionMaterialDTOList.length < 7">
                    <div v-for="(item1,index) in item. distributionMaterialDTOList"
                         :key="index">
                      <span>{{item1.materialName}}，</span>
                      <span>x {{item1.totalQuantity}}</span>
                    </div>
                  </div>
                  <div class="message-li"
                       v-if="item. distributionMaterialDTOList.length > 7">
                    <div v-for="(item1,index) in item.distributeMaterialDTOList1"
                         :key="index">
                      <span>{{item1.materialName}}，</span>
                      <span>x{{item1.totalQuantity}}</span>
                    </div>
                  </div>
                  <div class="message-li"
                       v-if="item. distributionMaterialDTOList.length > 7">
                    <div>...等{{item. distributionMaterialDTOList.length}}款</div>
                  </div>

                  <div class="clickxinxi">
                    <div class="wulxinxi">物料信息</div>
                    <table border="0"
                           cellspacing="0"
                           cellpadding="0">
                      <tr>
                        <td>物料</td>
                        <td class="NoNewline"
                            v-for="(item, index) in item. distributionMaterialDTOList"
                            :key="index">{{item.materialName}}</td>
                      </tr>
                      <tr>
                        <td>数量</td>
                        <td class="NoNewline"
                            v-for="(item, index) in item. distributionMaterialDTOList"
                            :key="index">{{item.totalQuantity}}</td>
                      </tr>
                    </table>
                    <div class="clickflat"> <span></span> </div>
                  </div>
                </div>
                <div class="wangdian">{{item.tenantName}}</div>
                <div class="distribution-quantity">{{item.materialNum}}</div>
                <div class="distribution-money">{{item.materialMoney}}</div>
                <div class="distribution-status">
                  <span v-if="item.state === '0'">待配货</span>
                  <span class="greenColor"
                        v-if="item.state === '1'">已配货</span>
                  <span v-if="item.state === '2'">待提货</span>
                  <span class="greenColor"
                        v-if="item.state === '3'">已提货</span>
                  <div v-if="item.packageStatus === 1"> <i></i> 部分打包 </div>
                  <div v-if="item.state === '2'"> <i></i> 未提货 </div>
                  <div v-if="item.state === '1' || item.state === '3'"> <i></i> 包裹（{{item.packageNum}}） </div>
                  <div v-if="item.state === '0'"> <i></i> 未打包 </div>
                </div>
                <div :class="{'distribution-operation':true,'istime': item.state !== '0' && item.state !== '1'}">
                  <div class="peihuoOk"
                       v-if="item.state === '0' "
                       @click="enterDetails(item.id)">立即配货</div>
                  <a-popconfirm placement="top"
                                ok-text="确定"
                                cancel-text="取消"
                                @confirm="cancelDetails(item.id)">
                    <template slot="title">
                      <p>确定取消配货？</p>
                    </template>
                    <div class="peihuo"
                         v-if="item.state === '1'">取消配货</div>
                  </a-popconfirm>
                  <i> <img src="../../../assets/image/sellerHub/dy.png"
                         alt=""> 打印商品清单</i>
                </div>
              </div>

              <div class="distribution-footer">
                <img src="../../../assets/image/sellerHub/beizhu.png"
                     alt="">
                {{item.comment}}
              </div>
            </div>
          </div>
          <div class="pagination_list">
            <div class="fl">
              <img src="../../../assets/image/sellerHub/moneys.png"
                   alt=""> <span>物料总金额（元）：<i style="color:#D73737">¥{{materialSum}}</i> </span>
              <img src="../../../assets/image/sellerHub/times.png"
                   alt=""> <span>物料总数量（个）：<i>{{materialCount}}</i> </span>
              <img src="../../../assets/image/sellerHub/fl.png"
                   alt=""> <span>物料品类（类）：<i>{{materialCategoryCount}}</i> </span>
            </div>
            <span>共 <i>{{total}}</i> 条</span>
            <pagination @pageChange="pageChange"
                        :total="total"
                        :current="current"></pagination>
          </div>
        </div>
        <div v-if="!pageStatus">
          <div class="zanwu">
            <img src="../../../assets/image/sellerHub/zanwusp.png"
                 alt="">
          </div>

        </div>
        <div class="pagination_list">
          <div class="fl">
            <img src="../../../assets/image/sellerHub/moneys.png"
                 alt=""> <span>物料总金额（元）：<i style="color:#D73737">¥{{materialSum}}</i> </span>
            <img src="../../../assets/image/sellerHub/times.png"
                 alt=""> <span>物料总数量（个）：<i>{{materialCount}}</i> </span>
            <img src="../../../assets/image/sellerHub/fl.png"
                 alt=""> <span>物料品类（类）：<i>{{materialCategoryCount}}</i> </span>
          </div>
          <span>共 <i>{{total}}</i> 条</span>
          <pagination @pageChange="pageChange"
                      :total="total"
                      :current="current"></pagination>
        </div>
      </div>
    </div>

    <!-- //组件 -->
    <distributionDetails ref="RsplitPackage"
                         :visible="disDetails"
                         @confirmDistributionDetails="confirmDistributionDetails"
                         @cancel="disDetails = false"></distributionDetails>
  </div>
</template>
<script>
import distributionDetails from "./components/distributionDetails";
import { message } from 'ant-design-vue';
import pagination from '@/components/common/pagination.vue'
export default {
  components: {
    pagination,
    distributionDetails
  },
  data () {
    return {
      //tab 切换标识
      titleIndex: 1,
      disDetails: false,
      //表单展开更多
      moreFormStatus: false,
      //页面是否有数据
      pageStatus: true,
      //弹窗
      tanchuang: false,
      //包裹打包
      packageStatus: 1,
      //包裹状态
      packageStatus1: 1,
      //物品
      total: 1,
      current: 1,
      form: {
        pageNo: '1',
        pageSize: '10',
        keyWords: '',
        //期望配货完成时间-开始
        expectDistributeStartTime: '',
        //期望配货完成时间-结束
        expectDistributeEndTime: '',
        expectDistributeTimeType: 0,
        //配货完成时间-开始
        distributeFinishStartTime: '',
        //配货完成时间-结束
        distributeFinishEndTime: '',
        distributeFinishTimeType: 0,
        //确认配货上门时间-开始
        homeDeliveryStartTime: '',
        //确认配货上门时间-结束
        homeDeliveryEndTime: '',
        homeDeliveryTimeType: 0,
        //实际提货时间-开始
        actualDeliveryStartTime: '',
        //实际提货时间-结束
        actualDeliveryEndTime: '',
        actualDeliveryTimeType: 0,
        createStartAt: '',
        createEndAt: '',
        createAtType: 0,
        subOrderNo: '',
        materialName: '',
        tenantId: undefined,
        distributionName: '',
        state: '',
        supplierId: '',
      },
      imageList: [],
      goodArr: [],
      cardTypeArr: [
        {
          title: '身份证',
          type: '01',
        },
        {
          title: '护照',
          type: '02',
        },
        {
          title: '军官证',
          type: '03',
        },
        {
          title: '港澳通行证',
          type: '04',
        },
        {
          title: '台胞证',
          type: '05',
        },
      ],
      //超时订单数量
      overTimeCount: 0,
      AllCount: 0,
      takeDeliveryCount: 0,
      takeDistributeCount: 0,
      waitDeliveryCount: 0,
      waitDistributeCount: 0,
      materialCategoryCount: 0,
      materialCount: 0,
      materialSum: 0,
      rules: {}
    }
  },
  created () {
    this.getList()
    this.getlist1()
    this.cardTypeList()
  },
  methods: {
    confirm () {
      message.info('Clicked on Yes.');
    },
    //获取列表
    getList () {
      this.form.supplierId = JSON.parse(localStorage.getItem('vuex')).user.currentTenant.id
      this.$store.dispatch('request', this.$api.sellerCenter.distributePage(this.form)).then(res => {
        let result = res.result.records

        this.total = res.result.total
        if (result.length === 0) {
          this.pageStatus = false
        } else {
          this.pageStatus = true
          this.imageList = result
          console.log(this.imageList);
          for (var i = 0; i < result.length; i++) {
            if (result[i].distributionMaterialDTOList.length > 7) {
              result[i].distributeMaterialDTOList1 = JSON.parse(JSON.stringify(result[i].distributionMaterialDTOList));
              result[i].distributeMaterialDTOList1 = result[i].distributeMaterialDTOList1.spice(7, result[i].distributionMaterialDTOList.length - 7)
            }
            // 以后时间格式转化就这么写，不然safari上时间格式会报错
            this.imageList[i].expectDistributeTime = this.$dateTrans(result[i].expectDistributeTime).format('yyyy-MM-dd hh:mm:ss');
            this.imageList[i].createAt = this.$dateTrans(result[i].createAt).format('yyyy-MM-dd hh:mm:ss');
            this.imageList[i].expectDistributeTimeDate = this.imageList[i].expectDistributeTime.split(' ')[0]
            let time = this.imageList[i].expectDistributeTime.split(' ')[1]
            this.imageList[i].expectDistributeTimeHH = time.split(':')[0]
            this.imageList[i].expectDistributeTimeMM = time.split(':')[1]

            if (result[i].homeDeliveryTime !== null) {
              this.imageList[i].homeDeliveryTime = this.$dateTrans(result[i].homeDeliveryTime).format('yyyy-MM-dd hh:mm:ss');
              console.log(this.imageList[i].homeDeliveryTime);
              this.imageList[i].homeDeliveryTimeDate = this.imageList[i].homeDeliveryTime.split(' ')[0]
              let time1 = this.imageList[i].homeDeliveryTime.split(' ')[1]
              this.imageList[i].homeDeliveryTimeHH = time1.split(':')[0]
              this.imageList[i].homeDeliveryTimeMM = time1.split(':')[1]
            } else {
              this.imageList[i].homeDeliveryTimeDate = '--'
            }


            let num = ''
            if (this.imageList[i].materialDetail !== null) {
              num = this.imageList[i].materialDetail.split(',')
              if (num.length >= 8) {
                this.imageList[i].goodsArr = num
              }
            } else {
              this.imageList[i].materialDetail = ''
            }
            //超出时间逻辑
            //当前时间
            let newTime = new Date().getTime()
            let Time = ''
            if (this.imageList[i].state === '0' || this.imageList[i].state === '1') {
              Time = new Date(result[i].expectDistributeTime).getTime()
            } else if (this.imageList[i].state === '2' || this.imageList[i].state === '3') {
              if (result[i].homeDeliveryTimeDate !== '--') {
                Time = new Date(result[i].homeDeliveryTimeDate).getTime()
              } else {
                this.imageList[i].timeoutStatus = 3
              }

            }
            //期望配货完成时间
            if (this.imageList[i].timeoutStatus !== 3) {
              let exceedTime = ''
              if (newTime > Time) {
                this.imageList[i].timeoutStatus = 1
                exceedTime = newTime - Time
              } else {
                this.imageList[i].timeoutStatus = 2
                exceedTime = Time - newTime
              }

              //计算出相差天数
              let days = Math.floor(exceedTime / (24 * 3600 * 1000));
              //计算出小时数
              let leave1 = exceedTime % (24 * 3600 * 1000);
              //计算天数后剩余的毫秒数
              let hours = Math.floor(leave1 / (3600 * 1000));
              //计算相差分钟数
              let leave2 = leave1 % (3600 * 1000);
              //计算小时数后剩余的毫秒数
              let minutes = Math.floor(leave2 / (60 * 1000));
              //计算相差秒数
              let leave3 = leave2 % (60 * 1000);
              //计算分钟数后剩余的毫秒数
              let seconds = Math.round(leave3 / 1000);

              hours = hours < 10 ? '0' + hours : hours;
              minutes = minutes < 10 ? '0' + minutes : minutes;
              seconds = seconds < 10 ? '0' + seconds : seconds;

              this.imageList[i].newDay = days;
              this.imageList[i].newHouer = hours;
              this.imageList[i].newMinute = minutes;
              this.imageList[i].newSs = seconds;
            }

          }
          console.log(this.imageList);
        }
      })

    },
    //获取服务网点
    cardTypeList () {
      this.$store.dispatch('request', this.$api.sellerCenter.getTenantList({ state: '-1' })).then(res => {
        console.log(res);
        this.cardTypeArr = res.result
      })

    },


    //数量
    getlist1 () {
      let status = ''
      if (this.form.state === '') {
        status = -1
      }
      else {
        status = this.form.state
      }
      console.log(this.form.state);
      this.$store.dispatch('request', this.$api.sellerCenter.getDistributeStatistical(status)).then(res => {
        console.log(res);
        this.overTimeCount = res.result.overTimeCount
        this.materialCategoryCount = res.result.materialCategoryCount
        this.materialCount = res.result.materialCount
        this.materialSum = res.result.materialSum
        this.takeDeliveryCount = res.result.takeDeliveryCount
        this.takeDistributeCount = res.result.takeDistributeCount
        this.waitDeliveryCount = res.result.waitDeliveryCount
        this.waitDistributeCount = res.result.waitDistributeCount
        this.AllCount = this.takeDeliveryCount + this.takeDistributeCount + this.waitDeliveryCount + this.waitDistributeCount
      })
      this.tanchuang = false
    },
    onSerch () {
      this.getList()
      this.getlist1()
    },
    onReset () {
      this.resets()
      this.$refs.ruleForm.resetFields();
    },
    resets () {
      this.form.keyWords = null
      this.expectDistributeStartTime = ''
      this.expectDistributeEndTime = ''
      this.expectDistributeEndTime = ''
      this.distributeFinishStartTime = ''
      this.distributeFinishEndTime = ''
      this.homeDeliveryStartTime = ''
      this.homeDeliveryEndTime = ''
      this.actualDeliveryStartTime = ''
      this.actualDeliveryEndTime = ''
    },
    //切换配货
    cutTitle (e) {
      this.form.state = e
      this.getList()
      this.getlist1()
    },
    onSearch () {

    },

    enterDetails (id) {
      this.disDetails = true
      this.$refs.RsplitPackage.getList(id);
    },
    //取消配货
    cancelDetails (id) {
      this.$store.dispatch('request', this.$api.sellerCenter.unPackFinish(id)).then(res => {
        this.getList()
        this.getlist1()
      })

    },
    //保存之后的操作
    confirmDistributionDetails () {
      this.disDetails = false
      this.tanchuang = true
      this.getList()
      this.getlist1()
    },

    //期待配货时间
    onChangeexpectDistributeStartTime (value, dateString) {
      this.form.expectDistributeStartTime = dateString[0]
      this.form.expectDistributeEndTime = dateString[1]
      this.onSerch()

    },
    //配货完成时间
    onChangedistributeFinishStartTime (value, dateString) {
      this.form.distributeFinishStartTime = dateString[0]
      this.form.distributeFinishEndTime = dateString[1]
      this.onSerch()
    },
    //确认上门提货时间
    onChangehomeDeliveryStartTime (value, dateString) {
      this.form.homeDeliveryStartTime = dateString[0]
      this.form.homeDeliveryEndTime = dateString[1]
      this.onSerch()
    },
    //实际上门提货时间
    onChangeactualDeliveryStartTime (value, dateString) {
      this.form.actualDeliveryStartTime = dateString[0]
      this.form.actualDeliveryEndTime = dateString[1]
      this.onSerch()
    },

    //订单时间
    onChangecreateStartAt (value, dateString) {
      this.form.createStartAt = dateString[0]
      this.form.createEndAt = dateString[1]
      this.onSerch()

    },

    pageChange (current) {
      console.log(current);
      this.current = current;
    },
  },
}
</script>
<style lang="less" scoped>
.distribution {
  .title {
    height: 54px;
    background: #ffffff;
    line-height: 54px;
    border-radius: 2px;
    font-size: 16px;
    padding-left: 24px;
    color: @newColorGreyFontM;
  }
  .formBox {
    width: 100%;
    padding: 24px;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0px 0px 6px 1px rgba(39, 36, 36, 0.06);
    margin-bottom: 16px;
    position: relative;
    // .sanjiao {
    //   position: absolute;
    //   left: 495px;
    //   top: -14px;
    //   width: 0;
    //   height: 0;
    //   border-left: 8px solid transparent;
    //   border-right: 8px solid transparent;
    //   border-bottom: 14px solid #fff;
    // }
  }
  .formBox::after {
    position: absolute;
    left: 495px;
    top: -14px;
    content: "";
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 14px solid #fff;
    filter: drop-shadow(1px -3px 2px rgba(39, 36, 36, 0.06));
  }
  .distribution-title {
    overflow: hidden;
    span {
      float: left;
      cursor: pointer;
      text-align: center;
      border: 1px solid #eeeeee;
      width: 107px;
      height: 52px;
      line-height: 52px;
      border-right: none;
      background: #f9f9f9;
      font-size: 14px;
      color: @newColorGreyFontM;
      i {
        margin-left: 8px;
        font-size: 12px;
        font-style: normal;
      }
    }
    > div {
      margin-left: 535px;
      height: 52px;
      border: 1px solid #eeeeee;
      color: transparent;
    }
    .active {
      color: #d83e3e;
      // font-size: 16px;
      border-bottom: none;
      background: #fff;
      font-weight: 500;
    }
  }
  .distribution-box {
    margin: 16px;
    background-color: #fff;
    padding: 24px;
    position: relative;
    .distribution-box-massage {
      width: 100%;
      height: 41px;
      line-height: 40px;
      padding-left: 25px;
      color: @newColorGreyFontM;
      font-size: 12px;
      border: 1px solid rgba(255, 144, 3, 0.2);
      background: rgba(255, 144, 3, 0.06);
      img {
        vertical-align: sub;
        margin-right: 8px;
      }
      span {
        color: @activeRed;
      }
    }
    .distribution-box-search {
      height: 32px;
      margin: 16px 0 24px;
      .input-search {
        width: 480px;
        /deep/ .ant-input {
          width: 436px;
        }
        /deep/ .ant-btn {
          padding: 0 8px;
          font-size: 12px;
          color: @newColorGreyFontM;
        }
        /deep/.ant-input-affix-wrapper .ant-input:not(:first-child) {
          padding-left: 40px;
        }
      }
      .search-button {
        width: 32px;
        height: 32px;
        margin-left: 8px;
        background: #f9f9f9;
        display: inline-block;
        border-radius: 2px;
        cursor: pointer;
        text-align: center;
        line-height: 32px;
        i {
          display: inline-block;
          img {
            width: 16px;
            height: 16px;
          }
        }
      }
      .a-button {
        font-size: 12px;
        color: @newColorGreyFontM;
        float: right;
        border: 1px solid @newBorder;
        padding: 0 12px;
        img {
          margin-right: 8px;
        }
      }
    }

    .more-form {
      height: 40px;
      line-height: 40px;
      color: #3b82ff;
      font-size: 12px;
      margin-left: 16px;
      cursor: pointer;
    }
    .more-form-button {
      position: absolute;
      right: 24px;
      bottom: 24px;
      .ant-btn {
        width: 52px;
        height: 32px;
        border-radius: 3px;
        margin-left: 8px;
        padding: 0;
        text-align: center;
        line-height: 32px;
        font-size: 12px;
        cursor: pointer;
      }
      span:nth-child(2) {
        color: #fff;
        background-color: @activeRed;
        border: none;
      }
    }
    .distribution-list {
      .distribution-list-tit {
        height: 46px;
        background-color: #fafafa;
        margin-top: 16px;
        > span {
          font-size: 14px;
          color: @newColorGreyFontM;
          display: inline-block;
          font-family: PingFangSC, PingFangSC-Medium;
          font-weight: 500;
          line-height: 48px;
          width: 10%;
          text-align: center;
        }
        span:nth-child(1) {
          width: 47%;
          text-align: left;
          padding-left: 16px;
        }
        span:nth-child(6) {
          width: 13%;
          padding-left: 16px;
        }
      }
      .distribution-list-box {
        .distribution-goods {
          height: 217px;
          border: 1px solid rgba(39, 36, 36, 0.08);
          margin-top: 16px;
          border-radius: 3px;
          position: relative;
          .goods-tit {
            height: 52px;
            border-bottom: 1px solid @newBorder;
            color: @newColorGreyFont;
            background: #f9f9f9;
            padding-top: 8px;
            font-size: 14px;
            .goods-tit-left {
              width: 301px;
              float: left;
              height: 36px;
              line-height: 38px;
              padding-left: 24px;
              // background-color: #f8f1f1;
              background: #f3f3f3;
              border-radius: 2px;
              .goods-tit-s1 {
                margin-left: 13px;

                > i {
                  font-size: 14px;
                  font-style: normal;
                  margin-right: 11px;
                  color: @newColorGreyFontM;
                }
                > u {
                  text-decoration: none;
                }
              }
              .goods-tit-s2 {
                display: inline-block;
                i {
                  color: @newColorGreyFontM;
                  font-style: normal;
                }
                span {
                  width: 22px;
                  height: 22px;
                  background: @activeRed;
                  font-size: 14px;
                  text-align: center;
                  line-height: 22px;
                  display: inline-block;
                  border-radius: 3px;
                  color: #fff;
                  font-size: 16px;
                }
                span:nth-child(4) {
                  margin-right: 24px;
                }
              }
            }
            .goods-active {
              width: 327px;
              background-color: #f8f1f1;
              color: @activeRed;
              .goods-tit-s1 {
                i {
                  color: @activeRed;
                }
              }
            }
            .goods-tit-span {
              margin-left: 24px;
              line-height: 36px;
              font-size: 16px;
              margin-left: 9px;
              float: left;
              font-style: italic;
              font-family: Helvetica, Helvetica-Regular;
              font-weight: 700;
              color: @activeRed;
              span {
                font-style: italic;
                padding-left: 4px;
                i {
                  font-style: italic;
                  font-size: 20px;
                  margin-right: 4px;
                }
              }
            }
            .goods-tit-span1 {
              margin-left: 9px;
              float: left;
              line-height: 36px;
              font-size: 16px;
              font-family: PingFangSC, PingFangSC-Semibold;
              color: @newColorGreyFontM;
              i {
                padding: 2px 4px;
                background: #f1f0f0;
                color: #fe8406;
                font-size: 16px;
                font-style: normal;
                margin-right: 6px;
              }
            }
            .goods-tit-right {
              float: right;
              font-size: 14px;
              height: 44px;
              line-height: 38px;
              color: @newColorGreyFont;
              margin-right: 17px;
              i {
                font-style: normal;
                color: @newColorGreyFontM;
                padding-right: 24px;
              }
              span {
                color: @newColorGreyFont;
                i {
                  color: @newColorGreyFontM;
                }
              }
            }
          }
          .distribution-goods-content {
            height: 112px;
            padding: 16px 0;
            position: relative;
            > div {
              float: left;
              width: 10%;
              height: 80px;
              text-align: center;
              border-left: 1px solid rgba(39, 36, 36, 0.08);
              padding: 20px 12px;
              font-size: 14px;
              line-height: 40px;
              color: @newColorGreyFontM;
            }
            > div:nth-child(1) {
              text-align: left;
              border-left: none;
              line-height: 20px;
            }
            > div:nth-child(6) {
              width: 13%;
            }
            .distribution-message {
              padding: 20px 24px;
              width: 47%;
              position: relative;
              > img {
                float: left;
                width: 24px;
                height: 24px;
                margin-right: 16px;
              }
              .message-li {
                float: left;
                > div {
                  float: left;
                  height: 40px;
                  span {
                    display: block;
                  }
                }
              }
              .clickxinxi {
                position: absolute;
                top: -105px;
                display: none;
                left: 64px;
                width: max-content;
                transition: all 0.3;
                padding: 10px 17px;
                height: 112px;
                background: #fff;
                box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.12);
                border-radius: 2px;
                .wulxinxi {
                  height: 10px;
                  line-height: 10px;
                  font-size: 12px;
                  columns: @newColorGreyFontM;
                  padding-left: 5px;
                  border-left: 2px solid @activeRed;
                  margin-bottom: 8px;
                }
                table {
                  border-top: 1px solid @newBorder;
                  border-right: 1px solid @newBorder;
                  tr {
                    border-bottom: 1px solid @newBorder;
                    td {
                      font-size: 12px;
                      // word-break: keep-all;
                      padding: 8px 12px;
                      border-left: 1px solid @newBorder;
                      text-align: center;
                    }
                    .NoNewline {
                      font-size: 12px;
                      // word-break: keep-all;
                      padding: 8px 12px;
                      text-align: center;
                    }
                  }
                }
                .clickflat {
                  position: relative;
                  span {
                    position: absolute;
                    left: 0px;
                    top: 8px;
                    width: 0;
                    height: 0;
                    border-left: 8px solid transparent;
                    border-right: 8px solid transparent;
                    border-top: 10px solid #fff;
                  }
                }
              }
            }
            .distribution-message:hover {
              .clickxinxi {
                transition: all 0.3;
                display: block;
              }
            }
            .wangdian {
              line-height: 20px;
            }
            .distribution-operation {
              padding: 0 12px;
              > div {
                width: 108px;
                height: 24px;
                margin: 0 auto;
                font-size: 12px;
                background-color: @activeRed;
                border: 1px solid @activeRed;
                line-height: 24px;
                text-align: center;
                color: #fff;
                border-radius: 2px;
                margin-bottom: 8px;
                cursor: pointer;
              }
              .peihuo {
                background-color: #fafafa;
                color: @newColorGreyFontM;
                border: 1px solid @newBorder !important;
                line-height: 24px;
                border: none;
              }
              i {
                font-style: normal;
                width: 100%;
                height: 20px;
                line-height: 20px;
                display: inherit;
                font-size: 14px;
                margin-bottom: 8px;
                img {
                  width: 16px;
                  height: 16px;
                  vertical-align: sub;
                  margin-right: 4px;
                }
              }
            }
            .istime {
              padding: 20px 0;
              padding-top: 30px;
            }
            .distribution-status {
              font-size: 12px;
              color: @colorGreyFont;
              padding: 20px 0;
              width: 10%;
              text-align: center;
              line-height: 30px;
              > span:nth-child(-n + 4) {
                width: 52px;
                display: inline-block;
                height: 26px;
                line-height: 26px;
                background: #fff7eb;
                border-radius: 2px;
                color: #ff9003;
                margin-bottom: 4px;
              }
              i {
                color: @activeRed;
                font-style: normal;
              }
              > div {
                width: 88px;
                height: 30px;
                margin: 0 auto;
                background: #fff;
                position: relative;
                box-shadow: 0px 0px 4px 1px rgba(39, 36, 36, 0.04);
                > i {
                  position: absolute;
                  left: 50%;
                  top: -6px;
                  width: 0;
                  height: 0;
                  border-left: 3px solid #fff;
                  border-right: 3px solid #fff;
                  border-bottom: 6px solid #fff;
                  box-shadow: 0px 0px 4px 1px rgba(39, 36, 36, 0.04);
                }
                > span {
                  color: @activeRed;
                }
              }
            }
          }

          .distribution-footer {
            height: 52px;
            line-height: 52px;
            padding-left: 24px;
            border-top: 1px solid @newBorder;
            img {
              width: 16px;
              height: 16px;
              margin-right: 8px;
            }
          }
        }
      }
      .pagination_list {
        text-align: right;
        position: fixed;
        left: 173px;
        bottom: 0;
        right: 16px;
        background-color: #fff;
        box-sizing: border-box;
        box-shadow: 0px 1px 0px 0px #f4f5f8 inset;
        height: 72px;
        background: #fff;
        padding: 24px;
        .fl {
          float: left;
          img {
            width: 16px;
            height: 16px;
            margin-right: 8px;
            vertical-align: sub;
          }
          span {
            font-size: 14px;
            color: @newColorGreyFont;
            margin-right: 33px;
            i {
              font-size: 18px;
              color: @newColorGreyFontM;
            }
          }
        }
        span {
          font-size: 12px;
          color: @colorCommonFont;
          line-height: 32px;
          margin-right: 16px;
          i {
            color: @activeRed;
            font-style: normal;
          }
        }
      }
      .zanwu {
        padding: 40px 0;
        text-align: center;
        img {
          width: 172px;
          height: 170px;
        }
      }
    }
  }
}
.greenColor {
  color: #79c860 !important;
  background-color: #f5fbf3 !important;
}
/deep/ .ant-form label {
  font-size: 14px;
  color: @colorCommonFont;
}
/deep/ .ant-row {
  overflow: hidden;
}
/deep/ .ant-form-item {
  margin-bottom: 0;
}
/deep/ .ant-input {
  width: 100%;
  font-size: 14px;
}
/deep/ .ant-select-selection__placeholder,
.ant-select-search__field__placeholder {
  font-size: 14px;
}
/deep/ .ant-select-selection-selected-value {
  font-size: 12px;
}
/deep/ .ant-calendar-picker-input.ant-input {
  padding: 4px 0;
}
/deep/ .ant-col-6 {
  min-width: 210px;
  width: 20%;
  margin-right: 1%;
}
/deep/ .ant-col-9 {
  height: 26px;
  text-align: left;
  width: 50%;
}

@media screen and (max-width: 2300px) {
  * {
    font-size: 12px !important;
  }
  .title {
    font-size: 16px !important;
  }
  .goods-tit-span {
    font-size: 14px !important;
    span {
      font-size: 14px !important;
      i {
        font-size: 18px !important;
        font-style: italic;
      }
    }
  }
  .distribution
    .distribution-box
    .distribution-list
    .distribution-list-box
    .distribution-goods
    .goods-tit
    .goods-tit-span1
    i {
    font-size: 14px !important;
  }
  .distribution .formBox {
    padding: 16px;
  }
  .distribution .distribution-box .more-form-button {
    right: 16px;
    bottom: 16px;
  }
  .distribution .distribution-box .distribution-box-search .input-search {
    width: 408px !important;
  }
  .distribution
    .distribution-box
    .distribution-box-search
    .input-search
    /deep/
    .ant-input {
    width: 362px !important;
    font-size: 12px;
  }
  /deep/ .ant-input {
    font-size: 12px;
  }
  /deep/ .ant-col-6 {
    min-width: 210px;
    width: 20%;
    margin-right: 1%;
  }
  /deep/ .ant-col-9 {
    height: 26px;
    text-align: left;
    width: 50%;
  }
  /deep/ .ant-input {
    width: 100%;
  }
  /deep/ .ant-select-selection__placeholder,
  .ant-select-search__field__placeholder {
    font-size: 12px;
  }
  /deep/ .ant-form label {
    font-size: 12px;
    color: @colorCommonFont;
  }
}
</style>
